<template>
  <div class="app-container">
    <el-form
      ref="formData"
      :model="formData"
      label-position="left"
      label-width="150px"
    >
      <el-card>
        <el-form-item label="题目类型 " prop="quType">
          <el-select v-model="formData.quType" class="filter-item">
            <el-option
              v-for="item in quTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="难度等级 " prop="level">
          <el-select v-model="formData.level" class="filter-item">
            <el-option
              v-for="item in levels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="归属题库" prop="repoIds">
          <el-select multiple v-model="formData.repoIds" class="filter-item">
            <el-option
              v-for="item in repoList"
              :key="item.value"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="题目内容" prop="content">
          <quill-editor
            v-model="formData.content"
            ref="myQuillEditor"
            style="height: 400px"
            :options="editorOption"
          />
        </el-form-item>

        <br /><br /><br /><br /><br /><br />

        <el-form-item label="试题图片">
          <el-upload
            :action="uploadUrl"
            list-type="picture-card"
            name="head"
            :headers="headers"
            :on-success="uploadSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="整题解析" prop="oriPrice">
          <el-input
            v-model="formData.analysis"
            type="textarea"
            :precision="1"
            :max="999999"
          />
        </el-form-item>
      </el-card>

      <div
        class="filter-container"
        style="margin-top: 25px"
        v-if="formData.quType != 4"
      >
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="small"
          plain
          @click="handleAdd"
        >
          添加
        </el-button>

        <el-table :data="formData.answers" :border="true" style="width: 100%">
          <el-table-column label="是否答案" width="120" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isRight">答案</el-checkbox>
            </template>
          </el-table-column>

          <el-table-column label="选项图片" width="220px" align="center">
            <template slot-scope="scope">
              <el-upload
                :limit="1"
                :action="uploadUrl"
                list-type="text"
                :headers="headers"
                name="head"
                :on-success="
                  (response, file, fileList) => {
                    return uploadSuccess(response, file, fileList, scope.row);
                  }
                "
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </template>
          </el-table-column>

          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input v-model="scope.row.content" type="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="答案解析">
            <template slot-scope="scope">
              <el-input v-model="scope.row.analysis" type="textarea" />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100px">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeItem(scope.$index)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top: 20px">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <!-- <el-button type="info" @click="onCancel">返回</el-button> -->
      </div>
    </el-form>
  </div>
</template>

<script>
import { findAll } from "@/api/repo";
import { save, findById, upladAddress } from "@/api/qu";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: { quillEditor },
  data() {
    return {
      headers: {
        token: localStorage.getItem("token"),
      },
      uploadUrl: upladAddress + "/upload",
      editorOption: {},
      quTypes: [
        { value: 1, label: "单选题" },
        { value: 2, label: "多选题" },
        { value: 3, label: "判断题" },
        { value: 4, label: "简答题" },
      ],
      levels: [
        { value: 1, label: "普通" },
        { value: 2, label: "较难" },
      ],
      imageUrl: null,
      formData: {
        analysis: "",
        quType: 1,
        level: 1,
        repoIds: [],
        content: "",
        answers: [
          { isRight: 0, content: "", analysis: "" },
          { isRight: 0, content: "", analysis: "" },
          { isRight: 0, content: "", analysis: "" },
          { isRight: 0, content: "", analysis: "" },
        ],
      },
      repoList: [],
    };
  },
  methods: {
    handleAdd() {
      if (this.formData.quType == 1 || this.formData.quType == 2) {
        this.formData.answers.push({ isRight: 0, content: "", analysis: "" });
      }
    },
    removeItem(index) {
      if (this.formData.quType == 1 || this.formData.quType == 2) {
        this.formData.answers.splice(index, 1);
      }
    },
    submitForm() {
      //表单校验
      this.formData.answers.forEach((item) => {
        if (item.isRight) {
          item.isRight = 1;
        } else {
          item.isRight = 0;
        }
      });
      save(this.formData).then((res) => {
        console.log(res);
        //路由跳转 列表页
        if (res.code == 0) {
          this.$router.push({ path: "/qu/list" });
        }
      });
    },

    uploadSuccess(response, file, fileList, row) {
      console.log(response);

      if (row) {
        row.image = response.data;
      } else {
        this.formData.image = response.data;
      }
    },

    //
  },
  created() {
    if (this.$route.query.id > 0) {
      findById(this.$route.query.id).then((res) => {
        this.formData.answers = res.answers;
        this.formData.answers.forEach((item) => {
          if (item.isRight > 0) {
            item.isRight = true;
          } else {
            item.isRight = false;
          }
          console.log(item);
        });
        res.repoIds.forEach((item) => {
          this.formData.repoIds.push(item);
        });
        this.formData.id = res.qu.id;
        this.formData.quType = res.qu.quType;
        this.formData.level = res.qu.level;
        this.formData.image = res.qu.image;
        this.imageUrl = res.qu.image;
        this.formData.content = res.qu.content;
        this.formData.createTime = res.qu.createTime;
        this.formData.remark = res.qu.remark;
        this.formData.analysis = res.qu.analysis;
      });
    }
    //获取所有题库
    findAll().then((res) => {
      this.repoList = res;
    });
  },
  watch: {
    "formData.quType": {
      handler(newVal, oldVal) {
        if (newVal == 3) {
          this.formData.answers = [
            { isRight: 0, content: "错误", analysis: "" },
            { isRight: 0, content: "正确", analysis: "" },
          ];
        }

        if (newVal == 1 || newVal == 2) {
          this.formData.answers = [
            { isRight: 0, content: "", analysis: "" },
            { isRight: 0, content: "", analysis: "" },
            { isRight: 0, content: "", analysis: "" },
            { isRight: 0, content: "", analysis: "" },
          ];
        }

        if (newVal == 4) {
          this.formData.answers = [];
        }
      },
    },
  },
};
</script>